

<template>
  <interact-model ref="interact-model" :title="title" class="reservoir-model">
    <div class="reservoir-warpper">
      <div class="reservoir-tabs">
        <Tabs type="card" v-model="activeTab" :animated="false" @on-click="tabsClick">
          <TabPane label="水质信息" name="info"></TabPane>
          <TabPane label="水质视频" name="video"></TabPane>
        </Tabs>
      </div>
      <div class="reservoir-content">
        <div class="reservoir-table" v-show="activeTab === 'info'">
          <Table class="smallTable" :data="waterData" :columns="columns" stripe></Table>
        </div>
        <div class="reservoir-table" v-show="activeTab === 'video'">
          <video :src="videoSrc" autoplay loop></video>
        </div>
      </div>
    </div>
  </interact-model>
</template>

<script>
import { loadingMixin, interactModelMixin, aPictureModelMixin } from 'common/js/mixins'
import {ajaxGet} from 'api/axios'

export default {
  mixins: [loadingMixin, interactModelMixin, aPictureModelMixin],
  data () {
    return {
      activeTab: 'info',
      showLoading: false,
      title: '',
      waterData: [],
      showVideo: false,
      river_name: '',
      videoSrc: '',
      columns: [
        {
          title: '月份',
          align: 'center',
          key: 'month'
        },
        {
          title: '是否达标',
          align: 'center',
          key: 'is_standard'
        },
        {
          title: '溶解氧',
          align: 'center',
          render: (h, params) => {
            return h('div', params.row.data_list[0].value)
          }
        },
        {
          title: '高锰酸钾',
          align: 'center',
          render: (h, params) => {
            return h('div', params.row.data_list[1].value)
          }
        },
        {
          title: '化学需氧量',
          align: 'center',
          render: (h, params) => {
            return h('div', params.row.data_list[2].value)
          }
        },
        {
          title: '生化需氧量',
          align: 'center',
          render: (h, params) => {
            return h('div', params.row.data_list[3].value)
          }
        },
        {
          title: '氨氮',
          align: 'center',
          render: (h, params) => {
            return h('div', params.row.data_list[4].value)
          }
        },
        {
          title: '总磷',
          align: 'center',
          render: (h, params) => {
            return h('div', params.row.data_list[5].value)
          }
        }
      ]
    }
  },
  methods: {
    tabsClick (name) {
      if (name === 'video') {
        if (!this.showVideo) {
          this.getVideo()
        }
      }
    },
    show (feature, layerNames) {
      this.activeTab = 'info'
      this.showEchart = false
      this.$refs['interact-model'].showModel()
      this.getWater(feature.get('content').id)
    },
    getWater (id) {
      this.river_name = id
      this.title = `${id}水质信息`
      let url = `${globalConfig.mapIp}/bis/getwqlist?river_name=${id}&page=1&pageSize=12`
      ajaxGet(url).then(res => {
        this.waterData = res.result.result
      })
    },
    getVideo () {
      ajaxGet(`${globalConfig.mapIp}/bis/getwrvideo?river_name=${this.river_name}`).then(res => {
        this.videoSrc = res.result.files.path
        this.showVideo = true
      })
    }
  }
}
</script>

<style lang="scss">
.reservoir-model {
  width: 700px;
  height: 540px;
  .reservoir-warpper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    .smallTable{
      .ivu-table-cell{
        padding-left: 5px;
        padding-right: 5px;
      }
    }

    .reservoir-tabs {
      position: absolute;
      left: 5px;
      right: 5px;
      top: 5px;
      .ivu-tabs-bar {
        background-color: white !important;
        .ivu-tabs-tab {
          color: #444;
        }
        .ivu-tabs-nav {
          .ivu-tabs-tab-active {
            color: #2d8cf0 !important;
          }
        }
      }
    }
    .reservoir-content {
      position: absolute;
      left: 5px;
      right: 5px;
      top: 40px;
      bottom: 5px;
      overflow-y:scroll;
      .reservoir-table {
        width: 100%;
        video{
          width: 100%;
          height: 450px;
        }
        .table {
          width: 100%;
          font-size: 14px;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          > div{
            border: 1px solid #ccc;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            > .left {
              display: block;
              height: 100%;
              width: 120px!important;
              border-left: none;
            }
            > span {
              padding: 10px;
              min-height: 43px;
              width: calc(100% - 120px);
              border-left: 1px solid #ccc;
            }
          }
        }
      }
      .reservoir-echarts {
        width: 100%;
        height: 100%;
        margin: auto;
        overflow: hidden;
        .reservoir-echart {
          width: 100%;
          height: 100%;
        }
        .reservoir-nodata {
          width: 100%;
          height: 100%;
          text-align: center;
          background-image: url('../img/aPictureNoCount.png');
          background-position: center 35%;
          background-repeat: no-repeat;
        }
      }
    }
  }
}
</style>
